<template>
    <div class="room-item-container" :style="{backgroundColor:bgc}">
        <div class="avatar-box">
            <lc-avatar 
                :type="room.roomType===2 ? 'group' : (room.roomType===1 ? 'user' : '')" 
                :src="room.roomAvatar" 
                :size="40"
            />
            <div v-if="showUnreadCount" class="msg-count">
                {{ unreadCount }}
            </div>
            <div v-if="showUnreadCountMuted" class="msg-count-muted"></div>
        </div>
        <div class="content-box">
            <div class="top">
                <div class="room-name">{{ room.roomName }}</div>
                <div class="mute-icon" v-if="room.isMuted===1"><el-icon><MuteNotification/></el-icon></div>
            </div>
            <div class="bottom">
                <div class="last-msg">
                    {{ lastMsg }}
                </div>
                <div class="last-msg-at">{{ msgSentAt }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps,computed } from 'vue';
import LcAvatar from './LcAvatar.vue';
import { MuteNotification,Grid } from '@element-plus/icons-vue';
import DateFormatter from '@/utils/dateFormatter';
import { RoomState } from '@/store/currentRoom';

// 定义传递的数据
const props = defineProps({
    room:{
        type: Object,
        required: true
    }
})

// 显示未读消息计数
const showUnreadCount = computed(() => {
    return props.room.isMuted===0 && props.room.unreadMsgCount > 0
})

// 显示未读消息计数-免打扰状态下
const showUnreadCountMuted = computed(() => {
    return props.room.isMuted===1 && props.room.unreadMsgCount > 0
})

// 未读消息
const unreadCount = computed(() => {
    return props.room.unreadMsgCount > 99 ? '99+' : props.room.unreadMsgCount
})

// 最后一条消息
const lastMsg = computed(() => {
    let str = ''
    if(showUnreadCountMuted.value){
        str = str + '[' + unreadCount.value + '条]'
    }
    if(props.room.roomType === 2 && props.room.lastMsgSentByName){
        str = str + props.room.lastMsgSentByName + ': '
    }
    if(props.room.lastMsg){
        str = str + props.room.lastMsg
    }
    return str
})


// 最后一条消息发送时间
const msgSentAt = computed(() => {
    let lastMsgAt = props.room.lastMsgAt;
    if(!lastMsgAt) return ''
    
    // 1. 将日期字符串转成 Date 对象
    const date = new Date(lastMsgAt); 

    // 获取当前日期
    const now = new Date();

    // 获取今天的零点时间，用来判断是否是今天
    const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate());

    // 获取今年的零点时间，用来判断是否是今年
    const startOfYear = new Date(now.getFullYear(), 0, 1);

    // 2. 判断日期属于哪种情况，并格式化
    if (date >= startOfToday) {
        // 如果日期是今天，显示 HH:mm 格式
        return DateFormatter.format(date, 'HH:mm');
    } else if (date >= startOfYear) {
        // 如果日期在今年内，显示 MM/dd 格式
        return DateFormatter.format(date, 'MM/dd');
    } else {
        // 否则，显示 yy/MM/dd 格式
        return DateFormatter.format(date, 'yy/MM/dd');
    }
})


// 房间的背景颜色
const bgc = computed(() => {
    return props.room.id===RoomState.currentRoom.id ? '#DBE4F0' : '#FFF'
})


</script>

<style scoped lang="scss">
.room-item-container{
    height: 40px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 9px 0px;
    border-bottom: 1px solid lightgray;
    cursor: pointer;
    & > .avatar-box{
        width: 40px;
        margin-right: 9px;
        position: relative; /**开启元素定位（因为子元素的绝对定位要基于父元素或者文档的html元素） */
        & > .msg-count{
            width: 18px; /* 通知数字的直径 */
            height: 18px;
            background-color: red; /* 通知圆形的背景颜色 */
            border-radius: 50%; /* 圆形 */
            color: white; /* 通知数字的颜色 */
            position: absolute; /**对本元素开启绝对定位，绝对定位会使元素相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的 <html> 元素（通常是浏览器视口）定位 */
            top: 0; /* 放置在右上角 */
            right: 0;
            transform: translate(50%,-50%); /*将元素向左和向上移动自身宽度和高度的 50%，控制居中*/
            display: flex; /**设置文字居中 */
            justify-content: center;
            align-items: center;
            font-size: 9px; /* 通知数字的字体大小 */
        }
        & > .msg-count-muted{
            width: 9px; /* 通知数字的直径 */
            height: 9px;
            background-color: red; /* 通知圆形的背景颜色 */
            border-radius: 50%; /* 圆形 */
            position: absolute; /**对本元素开启绝对定位，绝对定位会使元素相对于其最近的已定位的祖先元素进行定位。如果没有已定位的祖先元素，则相对于文档的 <html> 元素（通常是浏览器视口）定位 */
            top: 0; /* 放置在右上角 */
            right: 0;
            transform: translate(50%,-50%); /*将元素向左和向上移动自身宽度和高度的 50%，控制居中*/
        }
    }
    & > .content-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-x: hidden;/**隐藏超长部分，配合flex:1让它收缩，使下面省略显示文字生效 */
        & > .top{
            display: flex;
            flex-direction: row;
            margin-bottom: 4px;
            & > .room-name{
                flex: 1;
                font-size: 14px;
                white-space: nowrap;  /* 禁止文字换行 */
                overflow-x: hidden;     /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分用省略号表示 */
            }
            & > .mute-icon{
                & > .el-icon{
                    color: gray;
                    font-size: 14px;
                }
            }
        }
        & > .bottom{
            display: flex;
            flex-direction: row;
            color: gray;
            & > .last-msg{
                flex: 1;
                white-space: nowrap;  /* 禁止文字换行 */
                overflow-x: hidden;     /* 超出部分隐藏 */
                text-overflow: ellipsis; /* 超出部分用省略号表示 */
            }
        }
    }
}
</style>